<template>
  <div class="flexColumn">
    <div class="header" :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
      <header-tab :header-title="headerTitle" :show-arrow="true"></header-tab>
    </div>
    <section class="mgT1">
      <div class="sectionContent">
        <div class="dailyReport sectionTopBox">
          <!-- 扫单 -->
          <div class="flexConent">
            <div class="echartsWidth">
              <div id="sweepOrder1"></div>
              <div class="flexColumn circlFontSize">
                <span></span>
                <span>当日应扫描笔数</span>
                <span>ee</span>
                <span>当日已扫描笔数</span>
                <span class="itemColorGreen">98%</span>
                <span>当日扫单日清日结率</span>
                <span>200</span>
                <span>当日未扫单</span>
              </div>
            </div>
            <div class="echartsWidth">
              <div id="sweepOrder2"></div>
              <div class="flexColumn circlFontSize">
                <span></span>
                <span>当日应审核笔数</span>
                <span>ee</span>
                <span>当日已审核笔数</span>
                <span class="itemColorGreen">94%</span>
                <span>当日审核日清日结率</span>
                <span>300</span>
                <span>当日审核</span>
              </div>
            </div>
            <div class="echartsWidth">
              <div id="sweepOrder3"></div>
              <div class="flexColumn circlFontSize">
                <span></span>
                <span>当日应支付笔数</span>
                <span>ee</span>
                <span>当日已支付笔数</span>
                <span>99</span>
                <span>当日支付日清日结率</span>
                <span>300</span>
                <span>当日支付</span>
              </div>
            </div>
          </div>
          <!-- 审核 -->
          <div class="flexConent">
            <div id="toExamine"></div>
          </div>
          <!-- 支付 -->
          <div class="flexConent">
            <div id="list5"></div>
            <div id="list6"></div>
          </div>
          <div class="flexConent">
            <div id="list7"></div>
            <div id="list8"></div>
          </div>
          <div class="flexColumn">
            <div class="flexColumn personLiable">
              <p>逾期单据 卡点责任人分布</p>
              <div class="flexConent">
                <span class="itemBgColor"></span> 经办人
                <span class="itemBgColor2"></span> 扫描
                <span class="itemBgColor3"></span> 初审
                <span class="itemBgColor4"></span> 复审
                <span class="itemBgColor5"></span> 支付
              </div>
            </div>
            <div id="list10"></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        headerTitle: "日清日结",
        option: {},
        optionOne: {},
        optionTwo: {},
        payObj: {},
        option1: {},
        option2: {},
        option3: {},
        option4: {},
        option5: {},
        data1: [
          { name: "经办人" },
          { name: "扫描" },
          { name: "扫描" },
          { name: "复审" },
          { name: "初审" },
          { name: "支付" },
          { name: "支付" }
        ],
        ciclrCenter: ["44%", "54%"] // 圆心位置
      };
    },
    created() {
      this.getDailReportData()
    },
    watch: {
      payObj(newVal, oldVal) {
        this.payObj = newVal
      }
    },
    methods: {
      getDailReportData() {
        this.$axios({
          method: "post",
          url: this.$api.dailReport,
          headers: { "Content-Type": "application/json" },
          data: {
            params: {
              // access_token: this.$route.query.data,
              // userCode: this.$route.query.userCode,
              // yearv: this.$route.query.value[0],
              // orgCode: this.$route.query.orgCode,
              // orgName: this.$route.query.orgName,
              // roleType: this.$route.query.roleType,
              // mon: this.$route.query.value[1]
            }
          }
        })
          .then(res => {
            // "100011"：普通用户无数据
            // "100012"：责任人无数据
            // "100021"：是部门总但部门无数据
            // "100022"：是地区总但地区无数据
            // "100030"：集团无数据
            // "000000"：数据无误
            // "000001"：token用户过期或不存在
            // "200000"：详情无任何数据
            console.log(res, '打印数据data')
            if (res.data.result) {
              this.payObj = res.data.result;
              this.getlist1(); // 饼状图扫单
              console.log(this.payObj, 'payObj')
            }
            if (res.data.result.ErrorCode === "000001") {
              if (this.$store.state.isMobile) {
                this.methodApi.AlertNoToken();
              } else {
                this.methodApi.pcAlertNoToken();
              }
            }
          })
          .catch(error => {
            console.log(error, "home数据error");
          });
      },
      // 圆形图
      getlist1() {
        let textStyle = {
          textStyle: this.globalVariable.fontColor,
          fontWeight: "400"
        };
        let seriseData = [
          {
            name: "圆形图",
            type: "pie",
            radius: "80%", // 饼状图半径。
            center: this.ciclrCenter,
            tooltip: {
            enterable: true,
            formatter: function (
              params //数据格式
            ) {
              return params;
            }
          },
            data: [
              // TODO 饼状图需要的data值
              {
                value: 50,
                name: "当日应扫描笔数",
                itemStyle: { normal: { color: this.globalVariable.itemBgColor } }
              },
              {
                value: 150,
                name: "当日已扫描笔数",
                itemStyle: { normal: { color: this.globalVariable.itemBgColor1 } }
              }
            ],
            label: {
              normal: {
                position: "inner", //标签里面百分比的位置
                show: true,
                fontSize: 10,
                color: this.globalVariable.labelColor
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%"
                },
                labelLine: { show: false } // 是否显示圆圈的->箭头指示图标
              }
            }
          }
        ];
        this.option = {
          title: {
            text: "扫单",
            textStyle: textStyle
          },
          series: JSON.parse(JSON.stringify(seriseData)),
          tooltip: {
            enterable: true,
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (
              params //数据格式
            ) {
              return params;
            }
          }
        };
        this.optionOne = {
          title: {
            text: "审核",
            textStyle: textStyle
          },
          series: JSON.parse(JSON.stringify(seriseData))
        };
        this.optionTwo = {
          title: {
            text: "支付",
            textStyle: textStyle
          },
          series: JSON.parse(JSON.stringify(seriseData))
        };
        this.option.series[0].data = [
          {
            value: 20,
            name: "当日应扫描笔数",
            itemStyle: { normal: { color: this.globalVariable.itemBgColor } }
          },
          {
            value: 130,
            name: "当日已扫描笔数",
            itemStyle: { normal: { color: this.globalVariable.itemBgColor1 } }
          }
        ];
        this.optionOne.series[0].data = [
          {
            value: 50,
            name: "当日应扫描笔数",
            itemStyle: { normal: { color: this.globalVariable.itemBgColor } }
          },
          {
            value: 120,
            name: "当日已扫描笔数",
            itemStyle: { normal: { color: this.globalVariable.itemBgColor1 } }
          }
        ];
        console.log(this.payObj.payMain.ayNum, ' this.payObj.payMain.ayNum,')
        this.optionTwo.series[0].data = [
          {
            value: this.payObj.payMain.ayNum,
            name: "当日已支付笔数",
            itemStyle: { normal: { color: this.globalVariable.itemBgColor } }
          },
          {
            value: this.payObj.payMain.noNum,
            name: "当日未支付笔数",
            label: {
              show: false
            },
            itemStyle: { normal: { color: this.globalVariable.itemBgColor1 } }
          }
        ];
      },
      // 审核员工还是平台
      getlist4(
        showData,
        EmployeeOrPlatform,
        xAxisMax,
        xsplitNumber,
        yAxisMax,
        yAxisMin,
        ysplitNumber
      ) {
        // showData 控制是否显示数据具体信息。
        this.option1 = {
          title: {
            text: "审核日清日结率-分员工",
            left: "center",
            textStyle: this.globalVariable.fontColor
          },
          legend: {
            data: ["已处理", "未处理", "日清日结率"], // TODO 和series中Name一一对应；
            left: "center",
            top: 12,
            textStyle: this.globalVariable.legendTextStyle
          },
          grid: {
            // left: '1%',
            // right: '2%',
            // bottom: '2%',
            // containLabel: true // 自动居中
          },
          xAxis: {
            // EmployeeOrPlatform。员工还是平台data 不一样。
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine,
            data: ["环渤海", "西南", "长三角", "华南", "咩黎己画", "kjkjjjj"] // TODO x轴需要展示的数据
          },
          yAxis: [
            {
              type: "value",
              scale: true,
              name: "",
              max: 500, // TODO 最大值数据
              min: 0, // TODO 最小值数据
              splitNumber: 11,
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            },
            {
              type: "value",
              scale: true,
              name: "",
              max: 100, // TODO 最大值数据
              min: 80, // TODO 最小值数据
              splitNumber: 11, // 控制显示多少行线标
              axisLabel: this.globalVariable.yxisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            }
          ],
          dataZoom: this.globalVariable.dataZoom,
          series: [
            {
              name: "已处理", // todo xAxis.data值
              type: "bar",
              stack: "处理", // 控制是堆型，还是列型图
              barGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor
                }
              },
              data: [320, 302, 301, 334, 88, 99], // todo xAxis.data[0]值
              markLine: {
                lable: {
                  show: true
                },
                itemStyle: {
                  normal: {
                    color: this.globalVariable.brokenLineColor
                  }
                },
                data: [{ type: "average", name: "平均值" }] //虚线图平均值
              }
            },
            {
              name: "未处理",
              type: "bar",
              stack: "处理", // 控制是堆型，还是列型图
              barGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor1
                }
              },
              data: [120, 32, 101, 134, 78, 76]
            },
            {
              name: "日清日结率",
              type: "line",
              yAxisIndex: 0,
              barGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                color: this.globalVariable.labelColor,
                fontSize: this.globalVariable.itemFontSize,
                formatter: function (a) {
                  // 控制折现图自定义标记数据。
                  return a.value + "%";
                }
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor2
                }
              },
              lineStyle: this.globalVariable.brokenLineStyle,
              data: [88, 98, 66, 9, 99, 99]
            }
          ]
        };
      },
      getlist5(
        showData,
        xAxisMax,
        xAxisMin,
        xsplitNumber,
        yAxisMax,
        yAxisMin,
        ysplitNumber,
        echartTitle
      ) {
        // showData是否图形显示具体数据，
        // xAxisMax, xAxisMin,xsplitNumber【x轴最大最小值，x轴可分为几个范围】
        // yAxisMax, yAxisMin,ysplitNumber, echartTitley轴最大最小值，y轴可分为几个范围
        this.option2 = {
          title: {
            text: "支付测试tltle",
            left: "center",
            textStyle: this.globalVariable.fontColor
          },
          legend: {
            textStyle: this.globalVariable.legendTextStyle,
            top: 12,
            data: ["已处理", "未处理", "日清日结率"] // todo 和series中Name一一对应；
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            data: ["环渤海", "西南", "长三角", "华南"],
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine
          },
          yAxis: [
            {
              type: "value",
              scale: true,
              name: "",
              max: 500,
              min: 0,
              splitNumber: 11,
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              boundaryGap: [0.1, 0.1],
              splitLine: this.globalVariable.splitLine
            },
            {
              type: "value",
              scale: true,
              name: "",
              max: 100,
              min: 80,
              splitNumber: 11, // 控制显示多少行线标
              axisLabel: this.globalVariable.yxisLabel,
              axisLine: this.globalVariable.axisLine,
              boundaryGap: [0.1, 0.1],
              splitLine: this.globalVariable.splitLine
            }
          ],
          dataZoom: this.globalVariable.dataZoom,
          series: [
            {
              name: "已处理",
              type: "bar",
              stack: "已处理", // 控制是堆型，还是列型图
              barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor
                }
              },
              markLine: {
                label: {
                  show: true
                },
                itemStyle: {
                  normal: {
                    color: this.globalVariable.brokenLineColor
                  }
                },
                data: [{ type: "average", name: "平均值" }] //虚线图平均值
              },
              data: [320, 302, 301, 334]
            },
            {
              name: "未处理",
              type: "bar",
              stack: "已处理", // 控制是堆型，还是列型图
              barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                fontSize: this.globalVariable.itemFontSize
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor1
                }
              },

              data: [120, 132, 101, 134]
            },
            {
              name: "日清日结率",
              type: "line",
              yAxisIndex: 0,
              barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: this.globalVariable.brokenLineStyle,
                  label: {
                    show: true,
                    fontSize: this.globalVariable.itemFontSize,
                    color: this.globalVariable.labelColor,
                    formatter: function (a) {
                      // 控制折现图自定义标记数据。
                      return a.value + "%";
                    }
                  }
                }
              },
              lineStyle: this.globalVariable.brokenLineStyle,
              data: [88, 98, 66, 99]
            }
          ]
        };
      },
      getlist6() {
        this.option3 = {
          title: {
            text: "世界人口总量",
            left: "center",
            textStyle: this.globalVariable.fontColor
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'shadow'
          //     }
          // },
          legend: {
            data: ["2011年", "2012年"],
            textStyle: this.globalVariable.legendTextStyle,
            top: 12,
            left: "center"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine,
            splitLine: this.globalVariable.splitLine
          },
          yAxis: {
            type: "category",
            data: ["华南", "印尼", "美国"],
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine
          },
          dataZoom: this.globalVariable.dataZoom,
          series: [
            {
              name: "2011年",
              type: "bar",
              data: [18203, 23489, 3334],
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                normal: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                }
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor
                }
              }
            },
            {
              name: "2012年",
              type: "bar",
              data: [19325, 23438, 3333],
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                normal: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                }
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor1
                }
              }
            }
          ]
        };
      },
      getlist7() {
        this.option4 = {
          legend: {
            data: ["直接访问", "邮件营销"],
            textStyle: this.globalVariable.legendTextStyle,
            top: 12,
            left: "center"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine,
            splitLine: this.globalVariable.splitLine
          },
          yAxis: {
            type: "category",
            data: ["周一", "周二", "周三"],
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine
          },
          dataZoom: this.globalVariable.dataZoom,
          series: [
            {
              name: "直接访问",
              type: "bar",
              stack: "总量",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                normal: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                }
              },
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor
                }
              },
              data: [320, 302, 445]
            },
            {
              name: "邮件营销",
              type: "bar",
              stack: "总量",
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: this.globalVariable.itemBgColor1
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                }
              },
              data: [120, 132, 444]
            }
          ]
        };
      },
      getlist8() {
        const _this = this;
        this.option5 = {
          title: {
            left: "center"
          },
          grid: {
            // left: '25%',
            // right: '0%',
            // bottom: '2%',
            containLabel: true
          },
          xAxis: {
            // EmployeeOrPlatform。员工还是平台data 不一样。
            axisLabel: this.globalVariable.axisLabel,
            axisLine: this.globalVariable.axisLine,
            show: true,
            data: ["XIAOMEI", "小丽", "小明", "夏鸥", "小组", "噶哈哈啊哈"] // TODO x轴需要展示的数据
          },
          yAxis: [
            {
              type: "value",
              scale: true,
              name: "",
              max: 500, // TODO 最大值数据
              min: 0, // TODO 最小值数据
              splitNumber: 11,
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            },
            {
              type: "value",
              scale: true,
              name: "",
              max: 100, // TODO 最大值数据
              min: 80, // TODO 最小值数据
              splitNumber: 11, // 控制显示多少行线标
              axisLabel: this.globalVariable.yxisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            }
          ],
          dataZoom: this.globalVariable.dataZoom,
          series: [
            {
              name: "经办人", // todo xAxis.data值
              type: "bar",
              barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                show: true,
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = _this.globalVariable.itemColorList;
                    // this.data1 后台的返回值。带有名称和index。和取得放在echart的data对比;如果相同返回颜色值。
                    if (_this.data1[params.dataIndex].name == "经办人") {
                      return colorList[0];
                    } else if (_this.data1[params.dataIndex].name == "扫描") {
                      return colorList[1];
                    } else if (_this.data1[params.dataIndex].name == "初审") {
                      return colorList[2];
                    } else if (_this.data1[params.dataIndex].name == "复审") {
                      return colorList[3];
                    } else if (_this.data1[params.dataIndex].name == "支付") {
                      return colorList[4];
                    }
                  }
                }
              },
              data: [33, 44, 55, 66, 77, 88, 99]
              // todo xAxis.data[0]值
            }
          ]
        };
      }
    },
    mounted() {
      setTimeout(() => {
        // 支付
        console.log(this.optionTwo, 'optiontwoehdhdh')
        let myChart2 = this.$echarts.init(document.getElementById("sweepOrder3"));
        myChart2.setOption(this.optionTwo, false);
      }, 1000)
      this.getlist4(); // 审核

      this.getlist5(); // 支付

      this.getlist6(); // 支付

      this.getlist7(); // 累计预期

      this.getlist8(); // 累计预期责任人
      // 扫单
      let myChart = this.$echarts.init(document.getElementById("sweepOrder1"));
      myChart.setOption(this.option, false);
      // 审核
      let myChart1 = this.$echarts.init(document.getElementById("sweepOrder2"));
      myChart1.setOption(this.optionOne, false);
      // 支付
      let myChart2 = this.$echarts.init(document.getElementById("sweepOrder3"));
      myChart2.setOption(this.optionTwo, false);

      let myChart4 = this.$echarts.init(document.getElementById("toExamine"));
      myChart4.setOption(this.option1, false);

      let myChart5 = this.$echarts.init(document.getElementById("list5"));
      myChart5.setOption(this.option2, false);

      let myChart6 = this.$echarts.init(document.getElementById("list6"));
      myChart6.setOption(this.option2, false);

      let myChart7 = this.$echarts.init(document.getElementById("list7"));
      myChart7.setOption(this.option3, false);

      let myChart8 = this.$echarts.init(document.getElementById("list8"));
      myChart8.setOption(this.option4, false);

      let myChart10 = this.$echarts.init(document.getElementById("list10"));
      myChart10.setOption(this.option5, false);

      window.onresize = function () {
        myChart.resize(); // 图表根据窗口大小进行自适应
        myChart1.resize(); // 图表根据窗口大小进行自适应
        myChart2.resize(); // 图表根据窗口大小进行自适应
        myChart4.resize(); // 图表根据窗口大小进行自适应
        myChart5.resize(); // 图表根据窗口大小进行自适应
        myChart6.resize(); // 图表根据窗口大小进行自适应
        myChart7.resize(); // 图表根据窗口大小进行自适应
        myChart8.resize(); // 图表根据窗口大小进行自适应
        myChart9.resize(); // 图表根据窗口大小进行自适应
        myChart10.resize(); // 图表根据窗口大小进行自适应
        myChart11.resize(); // 图表根据窗口大小进行自适应
        myChart12.resize(); // 图表根据窗口大小进行自适应
      };
    }
  };
</script>

<style>
  #sweepOrder1,
  #sweepOrder2,
  #sweepOrder3 {
    width: 60%;
    height: 100%;
  }

  #toExamine {
    width: 100%;
    min-height: 4.2rem;
    margin-bottom: 10px;
  }

  #list5,
  #list6,
  #list7,
  #list8,
  #list9,
  #list10 {
    width: 100%;
    min-height: 4.2rem;
  }

  .echartsWidth {
    width: 33.3%;
    height: 3.5rem;
    display: flex;
    align-items: center;
  }

  .circlFontSize {
    font-size: 0.15rem;
  }

  .circlFontSize span {
    display: block;
    margin-bottom: 0.1rem;
  }

  .dailyReport {
    display: flex;
    flex-flow: column;
    height: auto;
    padding: 0.4rem 0.2rem;
    overflow: scroll;

    >div {
      margin-bottom: 0.8rem;
    }
  }

  .personLiable p {
    align-self: center;
    margin-bottom: 0.2rem;
  }

  .personLiable div {
    justify-content: center;
  }

  .personLiable div span {
    width: 0.2rem;
    height: 0.2rem;
    margin: 0 0.1rem;
  }
</style>